<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/dist/css/bootstrap.css" />
    <style>
        .aabb{
            background-color: seagreen;
            height: 400px;
            width: 1200px;
            margin: 0 auto;
        }
        .col-md-1{
            text-align: left;
            margin-left: 10px;
        }
        #sanle {
            line-height: 80px;

        }
        .sansan{
            text-align:center;
        }
        .sanchuang img{
            height: 40px;
            width: 100px;
            margin-top: 20px;
            margin-left: 30px;
        }
        .sanchuang {
            margin: 0 auto ;
            width: 1200px;
            background-color: #eee;
            border: 1px solid #ddd;
        }
        .zhangsi{
            width: 1200px;
            margin: 0 auto ;
            height: 900px;
            border: 1px solid white;
            background-color: white;
        }
        .wudi{
            width: 1030px;
            border: 1px solid #ddd;
            margin: 0 auto;
            height: 100px;
        }
    </style>
</head>
<body style="background-color: #ddd;">
<div class="aabb">
<div class="container">
    <div class="row" id="sanle">
        <div class="col-md-7 col-md-offset-1">
            <img src="img/ico_1.png" style="width: 200px;height: 80px;">
        </div>
        <div class="col-md-1">
            <label style="margin-left: 64px;">API</label>
        </div>
        <div class="col-md-1">
            <label style="margin-left: 32px;">博客</label>
        </div>
        <div class="col-md-1">
            <label>关于</label>
        </div>
        <div class="col-md-1">
        </div>
    </div>
</div>
<p>
</p>
<div class="sansan">
<p style="font-size: 60px;">
    BootCDN
</p>
<p style="font-size: 25px;margin-top: -10px;">
    稳定、快速、免费的前段开源项目CDN加速服务
</p>
<p style="font-size: 16px; margin-top: -10px;">
    共收录了 3382 个前段开源项目
</p>
<input style=" width: 720px; height: 45px; text-align: center; font-size: 18px; margin-top: 10px;"  placeholder="搜索开源库，例如：jquery" >
    <span class="glyphicon glyphicon-search" style="margin-left: -25px;"></span>
</div>
</div>
<div class="sanchuang">
<ul class="list-inline">
    <li><a href="https://www.bootcdn.cn/bootstrap/" title="Bootstrap" target="_blank" onclick="_hmt.push(['_trackEvent', 'mostused', 'click', 'mostused-bootstrap'])"><img src="img/bootstrap.svg" alt="bootstrap"></a></li>
    <li><a href="https://www.bootcdn.cn/react/" title="React" target="_blank" onclick="_hmt.push(['_trackEvent', 'mostused', 'click', 'mostused-react'])"><img src="img/react.svg" alt="React"></a></li>
    <li><a href="https://www.bootcdn.cn/jquery/" title="jQuery" target="_blank" onclick="_hmt.push(['_trackEvent', 'mostused', 'click', 'mostused-jquery'])"><img src="img/jquery.svg" alt="jquery"></a></li>
    <li><a href="https://www.bootcdn.cn/angular.js/" title="Angular.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'mostused', 'click', 'mostused-angular.js'])"><img src="img/angular-icon.svg" alt="angular.js"></a></li>
    <li><a href="https://www.bootcdn.cn/vue/" title="Vue.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'mostused', 'click', 'mostused-vue.js'])"><img src="img/vue.svg" alt="Vue.js"></a></li>
    <li><a href="https://www.bootcdn.cn/backbone.js/" title="Backbone.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'mostused', 'click', 'mostused-backbone.js'])"><img src="img/backbone-icon.svg" alt="backbonejs"></a></li>
    <li><a href="https://www.bootcdn.cn/lodash.js/" title="lodash" target="_blank" onclick="_hmt.push(['_trackEvent', 'mostused', 'click', 'mostused-lodash.js'])"><img src="img/lodash.svg" alt="lodashjs"></a></li>
    <li><a href="https://www.bootcdn.cn/moment.js/" title="Moment.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'mostused', 'click', 'mostused-moment.js'])"><img src="img/momentjs.svg" alt="momentjs"></a></li>
</ul>
</div>
<div class="zhangsi">
    <br>
    <p>
        <p style="margin-left: 900px;">拒绝流量挟持，全面使用HTTPS！</p>
    </p><br>
    <div class="wudi">
        <div class="row">
            <div class="col-md-3" >
                <label style="margin-left: 20px;margin-top: 20px;">bootstrap</label>
            </div>
            <div class="col-md-9" >
                <p style="margin-left: 20px;margin-top: 20px;">  Bootstrap是全球最受欢迎的前段组件库，用于开发响应式布局、移动设备优先的WEB项目。</p>


            </div>
        </div>
    </div>
</div>

<script language="JavaScript" src="js/vendor/jquery-3.2.1.min.js"></script>
<script language="JavaScript" src="js/dist/js/bootstrap.js"></script>
</body>
</html>